<template>
  <div>welcome</div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { onMounted, watch } from "vue";
import { getMenus } from "@/api/role";
import { useStore } from "vuex";
const router = useRouter();
const route = useRoute();
const store = useStore();

const fn = async () => {
  console.log("首页created");
  let res = await getMenus();
  console.log(store.state.routes.routes, res.data.data, "权限列表");
  const RoutesList = getAsyncRoutes(store.state.routes.routes, res.data.data);
  console.log(RoutesList, "过滤的权限信息");
  // 设置左边导航栏
  store.commit("routes/SET_ROUTES", RoutesList);
  console.log(store.state.routes.routes);

  // 添加动态路由
  for (let i = 0; i < RoutesList.length; i++) {
    router.addRoute("home", RoutesList[i]);
  }
};
function getAsyncRoutes(asyncRoutes: any, roleRoutes: any) {
  return asyncRoutes.filter((item: any) =>
    // 2 获得true就返回当前的路由信息
    roleRoutes.some(
      //1 根据角色表内含的path和路由的name是否相同 相同返回true
      (i: any) => i.path.toLowerCase() == item.name.toLowerCase()
    )
  );
}
fn();
</script>
